<template>
  <div class='page-container'>
    <div class="loading-wrap" v-show="loadingShow">
      <span>loading...{{process}}%</span>
      <div class="start-btn" v-show="process === 100" @click="start">开始</div>
    </div>
    <div class="ewm" v-show="ewm">
      <img src="./images/ewm.png" />
    </div>

    <div class="stage" ref="stage"></div>

    <div class="musicIcon" :class="[ bgMusic ? 'mplay' : 'mpause']" @click="switchMusic"></div>
    <div class="audioBox">
      <audio id="bgmusic" src="./mp3/bg.mp3" preload="auto" loop="loop"></audio>
      <audio id="ding" src="./mp3/ding.mp3" preload="auto"></audio>
      <audio id="huanhu" src="./mp3/huanhu.mp3" preload="auto"></audio>
    </div>
  </div>
</template>
<script>
import * as PIXI from 'pixi.js'
import { p1Arr,p2Arr,p2Arr2,p3Arr,p4Arr,p5Arr,spriteGroupBgObject,sence1Object,sence2Object,sence3Object,sence4Object,spriteGroupLastObject } from './js/data.js'
import { TweenMax, TweenLite, TimelineMax} from 'gsap'
import AlloyTouch from 'phy-touch'
let app;
let allTimeline;
let maxLong=-(10800-750)
export default {
  name: 'index',
  components: {},
  computed: {

  },
  data() {
    return {
      process: 0, // loading process
      loadingShow: true,
      bgMusic: false,
      ewm: false
    }
  },
  created() {
  },
  mounted() {
    this.loaderResource()
    this.initApp()
  },
  beforeDestroy() {
  },
  methods: {
    demo() {

    },
    initApp() {
      app = new PIXI.Application({
        width: 750,   // 宽度
        height: 1448,   // 高度
        antialias: true,    // default: false 反锯齿
        transparent: false, // default: false 透明度
        resolution: 1       // default: 1 分辨率
      })
      this.$refs['stage'].appendChild(app.view);

      let spriteGroupBg = new PIXI.Container()
      spriteGroupBg.position.set(0,0)
      spriteGroupBg.name='spriteGroupBg'
      app.stage.addChild(spriteGroupBg)

      let spriteGroupSences=new PIXI.Container()
      spriteGroupSences.position.set(0,0)
      spriteGroupSences.name='spriteGroupSences'
      app.stage.addChild(spriteGroupSences)

      let sence1=new PIXI.Container()
      sence1.position.set(1784,621)
      sence1.pivot.set(1784,621)
      sence1.name='sence1'
      let sence2=new PIXI.Container()
      sence2.position.set(1773,0)
      sence2.name='sence2'
      sence2.alpha=0
      let sence3=new PIXI.Container()
      sence3.position.set(4960,0)
      sence3.name='sence3'
      let sence4=new PIXI.Container()
      sence4.position.set(7902,0)
      sence4.name='sence4'
      spriteGroupSences.addChild(sence1)
      spriteGroupSences.addChild(sence2)
      spriteGroupSences.addChild(sence3)
      spriteGroupSences.addChild(sence4)

      let spriteGroupLast=new PIXI.Container()
      spriteGroupLast.position.set(-203,0)
      spriteGroupLast.name='spriteGroupLast'
      app.stage.addChild(spriteGroupLast)


      //添加精灵到精灵组
      let spritesObject=[]
      spritesObject.push(...spriteGroupBgObject)
      spritesObject.push(...sence1Object)
      spritesObject.push(...sence2Object)
      spritesObject.push(...sence3Object)
      spritesObject.push(...sence4Object)
      spritesObject.push(...spriteGroupLastObject)
      for(let key of Object.keys(spritesObject)){

        let temp=spritesObject[key]
        console.log(key,temp);
        this.addSprToGroup(temp.img,temp.x,temp.y,temp.alpah,temp.sprName,temp.sprGroup)
      }

      this.tweenAction()
      this.touchAction()
    },

    addSprToGroup(img,x,y,alpah,sprName,sprGroup){
      let spr=new PIXI.Sprite.fromImage(img)
      spr.position.set(x,y)
      spr.alpha=alpah
      spr.name=sprName

      let sprArr=sprGroup.split('/')
      let sprites=app.stage.getChildByName(sprArr[0])
      let sprArrNum=sprArr.length

      if(sprArrNum>1){
        for(let i=1;i<sprArrNum;i++){
          let midName=sprArr[i]
          sprites=sprites.getChildByName(midName)
        }
      }

      sprites.addChild(spr)
      console.log(sprites);
    },

    loaderResource() {
      let vm = this
      PIXI.loader
        .add(p1Arr, { crossOrigin: true})
        .add(p2Arr)
        .add(p2Arr2)
        .add(p3Arr)
        .add(p4Arr)
        .add(p5Arr)
        .on('progress',function(loader, resource){
          vm.process = parseInt(loader.progress)
        })
        .load(() => {
          vm.process = 100
        })
      //总时间轴
      allTimeline=new TimelineMax({paused:true})
    },

    tweenAction(){
      // sences spriteGroupSences
      let sences=app.stage.getChildByName('spriteGroupSences')
      let sencesTimeline= new TimelineMax({delay:0})
      let sencesTween=TweenMax.to(sences.position,1,{x:maxLong})
      sencesTimeline.add(sencesTween,0)
      allTimeline.add(sencesTimeline,0)

      //星星显现 spriteGroupSences/sence1/p1Star
      let star=app.stage.getChildByName('spriteGroupSences').getChildByName('sence1').getChildByName('p1Star')
      let starStartTime=-15/maxLong
      let starDuringTime=-25/maxLong
      let starTimleline=new TimelineMax({delay:starStartTime})
      let starTween=TweenMax.to(star,starDuringTime,{alpha:1})
      starTimleline.add(starTween,0)
      allTimeline.add(starTimleline,0)


      //房子放大 spriteGroupSences/sence1      spriteGroupSences/sence2
      let house=app.stage.getChildByName('spriteGroupSences').getChildByName('sence1')
      let houseStartTime=-600/maxLong
      let houseDuringTime=-200/maxLong
      let houseTimeline=new TimelineMax({delay:houseStartTime})
      let houseTween=TweenMax.to(house.scale,houseDuringTime,{x:3,y:3})
      let houseTween2=TweenMax.to(house,houseDuringTime,{alpha:0})
      houseTimeline.add(houseTween,0)
      houseTimeline.add(houseTween2,0)
      allTimeline.add(houseTimeline,0)

      let sence2=app.stage.getChildByName('spriteGroupSences').getChildByName('sence2')
      let sence2StartTime=-680/maxLong
      let sence2DuringTime=-100/maxLong
      let sence2Timeline=new TimelineMax({delay:sence2StartTime})
      let sence2Tween=TweenMax.to(sence2,sence2DuringTime,{alpha:1})
      sence2Timeline.add(sence2Tween,0)
      allTimeline.add(sence2Timeline,0)




      //音符飘动 spriteGroupSences/sence2/p2Yinfu
      let yinfu=app.stage.getChildByName('spriteGroupSences').getChildByName('sence2').getChildByName('p2Yinfu')
      let yinfuStartTime=-2450/maxLong
      let yunfuDuringTime=-200/maxLong
      let yinfuTimeline=new TimelineMax({delay:yinfuStartTime})
      let yinfuTween=TweenMax.to(yinfu.position,yunfuDuringTime,{x:3400,y:300})
      let yinfuTween2=TweenMax.to(yinfu,yunfuDuringTime,{alpha:0})
      yinfuTimeline.add(yinfuTween,0)
      yinfuTimeline.add(yinfuTween2,0)
      allTimeline.add(yinfuTimeline,0)


      //黑夜缩小为窗户 spriteGroupSences/sence3/p32   工作中的男孩 spriteGroupSences/sence3/p31
      let chuanghu=app.stage.getChildByName('spriteGroupSences').getChildByName('sence3').getChildByName('p32')
      let chStartTime=-2580/maxLong
      let chDuringTime=-800/maxLong
      let chTimeline=new TimelineMax({delay:chStartTime})
      let chTweeen=TweenMax.from(chuanghu.position,chDuringTime,{x:0,y:-20})
      let chTweeen2=TweenMax.from(chuanghu.scale,chDuringTime,{x:5,y:5})
      chTimeline.add(chTweeen,0)
      chTimeline.add(chTweeen2,0)
      allTimeline.add(chTimeline,0)

      let boyworking=app.stage.getChildByName('spriteGroupSences').getChildByName('sence3').getChildByName('p31')
      let bwStartTime=-2780/maxLong
      let bwDuringTime=-600/maxLong
      let bwTimeline=new TimelineMax({delay:bwStartTime})
      let bwTween=TweenMax.to(boyworking,bwDuringTime,{alpha:1})
      bwTimeline.add(bwTween,0)
      allTimeline.add(bwTimeline,0)

      //旋涡显示
      let xn=app.stage.getChildByName('spriteGroupLast').getChildByName('bgLast')
      let xnStartTime=-6613/maxLong
      let xnDuringTime=-50/maxLong
      let xnTimeline=new TimelineMax({delay:xnStartTime})
      let xnTween=TweenMax.to(xn,xnDuringTime,{alpha:1})
      xnTimeline.add(xnTween,0)
      allTimeline.add(xnTimeline,0)

    },

    touchAction(){
      let vm = this
      //seek progress
      let alloyTouch = new AlloyTouch({
        touch:'body',
        vertical:true,
        maxSpeed:0.8,
        max:0,
        min:maxLong,
        bindSelf:false,
        value: 0,
        change: (value) => {
          if((value<=0)&&(value>maxLong)){
            let progress=value/maxLong
            console.log(value,progress)
            allTimeline.seek(progress)
            vm.animationPlay(progress)
            vm.audioAction(progress)
          }
        }
      })
    },

    animationPlay(progress){
      //孩子蹒跚学走路 spriteGroupSences/sence2/p2Child
      //图片数组 p2Arr2
      let childStepStartTime=-900/maxLong
      let childDuringTime=-1300/maxLong

      if(progress>=childStepStartTime){
        let childNum=p2Arr2.length
        let childIndex=Math.floor((progress-childStepStartTime)/childDuringTime*childNum)
        //console.log('childIndex:'+childIndex)
        if((childIndex<childNum)&&(childIndex>=0)){
          app.stage.getChildByName('spriteGroupSences').getChildByName('sence2').getChildByName('p2Child').texture=new PIXI.Texture.fromImage(p2Arr2[childIndex])
        }
      }

      //旋涡，并出现扣题文字 spriteGroupLast/bgLast
      //p5Arr
      let xunStartTime=-6613/maxLong
      let xunDuringTime=-1000/maxLong

      if(progress>=xunStartTime){
        let xunNum=p5Arr.length
        let xunIndex=Math.floor((progress-xunStartTime)/xunDuringTime*xunNum)
        if((xunIndex<xunNum)&&(xunIndex>=0)){
          app.stage.getChildByName('spriteGroupLast').getChildByName('bgLast').texture=new PIXI.Texture.fromImage(p5Arr[xunIndex])
        }
      }

      let ewmStartTime=-7600/maxLong
      console.log({ewmStartTime});
      console.log({progress});
      if(progress>=ewmStartTime){
        this.ewm = true
      }else{
        this.ewm = false
      }
    },


    // 播放音乐
    audioPlay (musicId) {
      let au=document.getElementById(musicId)
      au.play()
      document.addEventListener('WeixinJSBridgeReady',function(){
        au.play()
      },false)
    },

    // 暂停音乐
    audioPause(musicId){
      let au=document.getElementById(musicId)
      au.pause()
      document.addEventListener('WeixinJSBridgeReady',function(){
        au.pause()
      },false)
    },

    audioAction(progress){
      let timeDur=20
      let auStarStartTime=-40/maxLong
      let auStarEndTime=-(40+timeDur)/maxLong

      if((progress>=auStarStartTime)&&(progress<=auStarEndTime)){
        this.audioPlay('ding')
      }
      if(progress<auStarStartTime){
        this.audioPause('ding')
      }

      //欢呼
      let auHuanhuStartTime=-2270/maxLong
      let auHuanhuEndTime=-(2270+timeDur)/maxLong

      if((progress>=auHuanhuStartTime)&&(progress<=auHuanhuEndTime)){
        this.audioPlay('huanhu')
      }
      if(progress<auHuanhuStartTime){
        this.audioPause('huanhu')
      }
    },

    // 音乐关闭打开
    switchMusic() {
      if (this.bgMusic) {
        this.bgMusic = false
        this.audioPause('bgmusic')
      } else {
        this.bgMusic = true
        this.audioPlay(('bgmusic'))
      }
    },


    start() {
      this.audioPlay('bgmusic')
      this.bgMusic = true
      this.loadingShow = false
    }
  }
}
</script>

<style scoped lang="less">
.page-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  font-size: 24px;
  .loading-wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;

    .start-btn {
      margin-top: 20px;
      width: 200px;
      height: 100px;
      background-color: #6f5b92;
      border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: white;
    }
  }

  .stage {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    /deep/
    canvas {
      width: 100%;
      height: 100%;
    }
  }

  .audioBox{
    display: none;
  }

  .musicIcon{
    width: 80px;
    height: 80px;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 9;
    background-size: cover;

    &.mplay{
      background-image: url(./images/musicon.png);
      animation: 1s zhuan infinite linear;
    }
    &.mpause{
      background-image: url(./images/musicoff.png);
    }

    @keyframes zhuan{
      0%{
        transform: rotate(0)
      }
      100%{
        transform: rotate(360deg)
      }
    }
  }

  .ewm{
    position: absolute;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    top: 25%;
    z-index: 10;
  }
  .ewm img{
    width: 100%;
  }




}
</style>
